<template>
  <div class="quality_result">
    <div class="top">
      <!--<affix :label="$t('qualityCheck.qualityResult2')"></affix>-->
      <div class="templa">
        <span class="temp">{{$t('qualityCheck.qualityTemplateClass')}}：</span>
        <el-radio-group v-model="webOrCallTemp" @change="tempStateChange">
          <el-radio :label="1">{{$t('qualityCheck.qualityTemplateClassCall')}}</el-radio>
          <el-radio :label="2">{{$t('qualityCheck.qualityTemplateClassWeb')}}</el-radio>
        </el-radio-group>
      </div>
      <div v-show="webOrCallTemp !== 2">
        <span class="temp">{{$t('qualityCheck.taskTempl2')}}</span>
        <el-select style="margin:10px 10px 10px 42px;" size="mini" v-model="callForm.TASK_ID" @change="taskTemChange" :placeholder="$t('webchat.webchatAll')">
          <el-option value="" :label="'--'+$t('public.pleasePick')+'--'"></el-option>
          <el-option
            v-for="(item, index) in taskTems"
            :key="index"
            :label="item.TASK_NAME"
            :value="item._id">
          </el-option>
        </el-select>
        <questionToolTip :tipContent="$t('qualityCheck.checkTaskTip')"></questionToolTip>
      </div>
      <div style="margin-top:10px; margin-bottom: 10px" class="templa">
        <span class="temp">{{$t('qualityCheck.qualityTemplate')}}：</span>
        <el-select style="margin-left: 42px;" v-model.trim="value" size="mini" @change="change" v-if="items.length!==0">
          <el-option
            v-show="webOrCallTemp === 2?item.QUALITY_TYPE === 'qualityWebchat':item.QUALITY_TYPE !== 'qualityWebchat'"
            :disabled="callForm.TASK_ID !== '' && webOrCallTemp !== 2"
            v-for="(item, index) in items"
            :key="index"
            :label="item.name"
            :value="index">
          </el-option>
        </el-select>
        <!--<el-radio-group v-model.trim="value" @change="change" v-if="items.length!==0">-->
          <!--<el-radio size="mini" :disabled="callForm.TASK_ID !== '' && webOrCallTemp !== 2"-->
             <!--v-show="webOrCallTemp === 2?item.QUALITY_TYPE === 'qualityWebchat':item.QUALITY_TYPE !== 'qualityWebchat'"-->
             <!--:label="index" v-for="(item, index) in items">-->
             <!--{{item.name}}-->
          <!--</el-radio>-->
        <!--</el-radio-group>-->
        <span v-else>{{$t('qualityCheck.pleaseExployModel')}}</span>
        <span class="ui-unfold-span">
          <span @click="isShowFold = false" v-show="isShowFold">{{$t('report.foldedContition')}}  <i class="el-icon-arrow-up"></i></span>
          <span @click="isShowFold = true" v-show="!isShowFold">{{$t('report.unfoldedContition')}} <i class="el-icon-arrow-down"></i></span>
        </span>
      </div>
      <Unfold :title="unfoldTitle" :isShow="isShowFold" style="margin-bottom: 20px">
        <template slot="unfoldSlot">
          <div v-if="items.length!==0">
            <div v-show="template.QUALITY_TYPE?template.QUALITY_TYPE!=='qualityWebchat':webOrCallTemp==1">
              <el-form labelPosition="top" :inline="true" :model="callForm" :rules="rules" ref="callForm"  class="demo-form-inline">
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item :label="$t('public.callTime')+':'">
                      <el-date-picker size="mini"
                                      :id="['z1','z2']"
                                      v-model="callForm.callTime"
                                      :editable="boolean"
                                      type="datetimerange"
                                      :picker-options="pickerOptions2"
                                      :placeholder="$t('public.timeRanges')"
                                      align="right"
                                      @change="callTimeChange">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('qualityCheck.callingNumber')+':'" prop="CALL_NO">
                      <el-input size="mini" v-model.trim="callForm.CALL_NO" :placeholder="$t('qualityCheck.pleaseEnterCallingNum')"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('public.satisfaction')+':'">
                      <!--<el-select size="mini" v-model.trim="callForm.INVESTIGATE" filterable :placeholder="$t('public.satisfaction')">-->
                        <!--<el-option :label="'&#45;&#45;'+$t('webchat.webchatAll')+'&#45;&#45;'" value=""></el-option>-->
                        <!--<el-option-->
                          <!--v-for="(item, index) in satisfactionList"-->
                          <!--:key="index"-->
                          <!--:label="item.name"-->
                          <!--:value="item.value">-->
                        <!--</el-option>-->
                      <!--</el-select>-->
                      <!--二级满意度-->
                      <el-cascader
                        style="width:100%;"
                        :options="investigateArray"
                        v-model.trim="INVESTIGATE"
                        change-on-select
                        @change="changeData(INVESTIGATE)"
                      ></el-cascader>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('qualityCheck.checkTime')+':'">
                      <el-date-picker size="mini"
                                      :id="['h1','h2']"
                                      v-model.trim="callForm.GRADE_TIME"
                                      type="datetimerange"
                                      :picker-options="pickerOptions2"
                                      :placeholder="$t('public.timeRanges')"
                                      :editable="boolean"
                                      align="right"
                                      @change="'gradeTimeChange'">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item :label="$t('qualityCheck.calledNumber')+':'" prop="CALLED_NO">
                      <el-input size="mini" :placeholder="$t('qualityCheck.pleaseEnterCalledNum')" v-model.trim="callForm.CALLED_NO"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('call.callType')+':'">
                      <el-select size="mini" v-model="callForm.CONNECT_TYPE" multiple filterable :placeholder="$t('webchat.webchatAll')">
                        <el-option
                          v-for="(item, index) in callTypeList"
                          :key="index"
                          :label="item.code_name"
                          :value="item.code_value">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item prop="CALL_TIME_LENGTH_BEGIN" :label="$t('qualityCheck.callTimeMin')+':'">
                      <el-input size="mini" placeholder="" v-model.trim="callForm.CALL_TIME_LENGTH_BEGIN">
                        <!--<template slot="append">{{$t('public.seconds')}}</template>-->
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item prop="CALL_TIME_LENGTH_END" :label="$t('qualityCheck.callTimeMax')+':'">
                      <el-input size="mini" placeholder="" v-model.trim="callForm.CALL_TIME_LENGTH_END">
                        <!--<template slot="append">{{$t('public.seconds')}}</template>-->
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="12">
                    <el-form-item :label="$t('qualityCheck.agentSubmitTime')+':'">
                      <el-date-picker size="mini"
                                      :id="['i1','i2']"
                                      v-model.trim="callForm.SUBMITTED_TIME"
                                      type="datetimerange"
                                      :picker-options="pickerOptions2"
                                      :placeholder="$t('public.timeRanges')"
                                      :editable="boolean"
                                      align="right"
                                      @change="submittedTimeChange">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('public.queues')+':'">
                      <el-select size="mini" v-model="callForm.ERROR_MEMO" multiple filterable :placeholder="$t('qualityCheck.skillGroupSearch')">
                        <el-option
                          v-for="(item, index) in callQueueList"
                          :key="index"
                          :label="item.DisplayName"
                          :value="item.Exten">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('qualityCheck.qualityRating')+':'">
                      <el-select size="mini" v-model.trim="callForm.LEVEL" v-if="!template.gradeConfig" multiple filterable :placeholder="$t('webchat.webchatAll')">
                        <el-option :label="$t('qualityCheck.excellent')" value='0'></el-option>
                        <el-option :label="$t('qualityCheck.qualified')" value='1'></el-option>
                        <el-option :label="$t('qualityCheck.remind')" value='2'></el-option>
                        <el-option :label="$t('qualityCheck.unqualified')" value='3'></el-option>
                      </el-select>
                      <el-select v-else size="mini" v-model.trim="callForm.LEVEL" filterable multiple :placeholder="$t('webchat.webchatAll')">
                         <el-option
                          v-for="(item, index) in template.gradeConfig"
                          :key="index"
                          :label="item.name"
                          :value="index">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item :label="$t('call.SQLabel')+':'">
                      <el-select size="mini" v-model.trim="callForm.SERVICE_QUALITY" filterable :multiple="true" :placeholder="'--'+$t('webchat.webchatAll')+'--'">
                        <el-option
                          v-for="(item, index) in newSqLabel"
                          :key="index"
                          :label="item.name"
                          :value="item._id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('qualityCheck.monnityType')+':'">
                      <el-select size="mini" v-model.trim="callForm.monitorType" filterable :multiple="true" :placeholder="'--'+$t('webchat.webchatAll')+'--'">
                        <el-option
                          v-for="(item, index) in monitorTypeList"
                          :key="index"
                          :label="item.name"
                          :value="item._id">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('qualityCheck.qualityControlPersonnel')+':'">
                      <m7-select size="mini" :options="selectAgents" v-model="callForm.GRADE_USER" multiple filterable :placeholder="$t('public.pickAgentTip1')">
                      </m7-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('public.callLabel')+':'">
                      <label-cascader @labelSelect="labelSelect" :isNoLabel="true" :resetSelect="resetSelect" :needType="true"></label-cascader>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item :label="$t('qualityCheck.videoSource')+':'">
                      <el-select size="mini" v-model.trim="callForm.RECORDING_FROM" filterable :placeholder="'--'+$t('webchat.webchatAll')+'--'+':'">
                        <el-option :label="'--'+$t('webchat.webchatAll')+'--'" value=""></el-option>
                        <el-option :label="$t('qualityCheck.agentSubitted')" value='agentCommit'></el-option>
                        <el-option :label="$t('qualityCheck.systemSubitted')" value='systemCommit'></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('qualityCheck.performanceVideo')+':'">
                      <el-select size="mini" v-model.trim="callForm.RECORDING_PERFORMANCE" filterable :placeholder="'--'+$t('webchat.webchatAll')+'--'+':'">
                        <el-option :label="'--'+$t('webchat.webchatAll')+'--'" value=""></el-option>
                        <el-option :label="$t('qualityCheck.performanceVideo')" value='agentCommit'></el-option>
                        <el-option :label="$t('qualityCheck.normalVideo')" value='systemCommit'></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-show="template.type === 'pass'">
                    <el-form-item :label="$t('qualityCheck.viewTheWay')+':'">
                      <el-select size="mini" v-model.trim="callForm.amount" :placeholder="$t('public.all')">
                        <el-option value="" :label="'--'+$t('webchat.webchatAll')+'--'"></el-option>
                        <el-option :label="$t('qualityCheck.passed')" value='yes'></el-option>
                        <el-option :label="$t('qualityCheck.noPassed')" value='no'></el-option>
                        <el-option :label="$t('qualityCheck.notInvolving')" value='dont'></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6" v-show="template.type === 'pass'">
                    <el-form-item :label="$t('qualityCheck.showNumThelaters')+':'">
                      <el-select size="mini" v-model.trim="floors" :placeholder="$t('webchat.webchatAll')">
                        <el-option :label="i" :value="i" v-for="(i, index) in floorsOption" :key="index"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12" v-show="template.type !== 'pass'">
                      <el-form-item :label="$t('qualityCheck.singleScore')+':'">
                        <el-select style="width:30%;margin-right:20px;" size="mini" v-model.trim="callForm.GRADE_CONFIG" :placeholder="$t('webchat.webchatAll')" @change="configChange">
                          <el-option value="" :label="'--'+$t('public.pleasePick')+'--'"></el-option>
                          <el-option
                            v-for="(item, index) in configList"
                            :key="index"
                            :label="item.name"
                            :value="item.order">
                          </el-option>
                        </el-select>
                        <el-input style="width:30%;" size="mini" :placeholder="GRADE_P" v-model.trim="callForm.GRADE_MIN">
                          <template slot="append">{{$t('public.minutes')}}</template>
                        </el-input>
                        <span style="display: inline-block;margin: 0px 10px 0 10px;font-size: 12px;">{{$t('public.to')}}</span>
                        <el-input style="width:30%;" size="mini" :placeholder="GRADE_P" v-model.trim="callForm.GRADE_MAX">
                          <template slot="append">{{$t('public.minutes')}}</template>
                        </el-input>
                      </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20" v-show="qualityResultAgent">
                  <el-col :span="12">
                    <el-form-item :label="$t('call.callRingSeat')+':'">
                      <el-popover
                        ref="popover4"
                        placement="bottom"
                        @show="popoverShow"
                        v-model.trim="popoverVisableCall"
                        width="240"
                        trigger="click">
                        <agent-tree :readSeat="folllowedAgents" :visable="popoverVisableCall" ref="agentTree" @saveFollowedAgents="saveFollowedAgents"></agent-tree>
                      </el-popover>
                      <!--<el-select style="max-width: 341px;" size="mini"  v-model="callForm.DISPOSAL_AGENT" multiple filterable :placeholder="$t('public.pickAgentTip1')">
                        <el-option
                          v-for="item in callAgentList"
                          :label="item.displayName + '[' + item.exten + ']'"
                          :value="item._id">
                        </el-option>
                      </el-select>-->
                      <div class="follow-agent-wrap" v-popover:popover4 style="width:calc(100% - 300px);">
                        <span class="follow-agent follow-common" v-for="item in folllowedAgents" :key="item._id">{{item.label}}
                          <i class="el-icon-close" @click.stop="closeFollowedAgents(item._id)"></i>
                        </span>
                        <div>
                          <span type="primary" class="follow-agent-wrap-btn"><i class="el-icon-arrow-down" style="color: #c0c4cc"></i></span>
                        </div>
                      </div>
                      <el-checkbox v-model="callForm.includeSubordinate" style="float: left">{{$t('public.includeUnderAgent')}}</el-checkbox>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('call.callNumber')+':'">
                      <el-input size="mini" v-model.trim="callForm._id" :placeholder="$t('public.pleaseEnter')"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <!--<div class="sub">-->
                <!--<el-button class="primary_btn report_excel_btn" @click="rest">{{$t('public.reset')}}</el-button>-->
                <!--<el-button type="primary" class="search primary_btn" @click="query">{{$t('public.search2')}}</el-button>-->
              <!--</div>-->
              <!--<affix :label="$t('public.searchResult')"></affix>-->
              <!--<div class="sub export">-->
                <!--<el-button type="primary" class="search primary_btn" @click="ran">{{$t('qualityCheck.paiming')}}</el-button>-->
                <!--<el-button type="primary" class="search primary_btn report_excel_btn" @click="expor">{{$t('report.exportXls')}}</el-button>-->
              <!--</div>-->
            </div>
            <div v-show="template.QUALITY_TYPE?template.QUALITY_TYPE==='qualityWebchat':webOrCallTemp==2">
              <el-form labelPosition="top" :inline="true" :model="form" :rules="rules" ref="form"  class="demo-form-inline">
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item :label="$t('webchat.takeTime')+':'">
                      <el-date-picker size="mini"
                                      :id="['j1','j2']"
                                      v-model="form.claimTime"
                                      :editable="boolean"
                                      type="datetimerange"
                                      :picker-options="pickerOptions2"
                                      :placeholder="$t('public.timeRanges')"
                                      align="right"
                                      @change="claimTimeChange">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('public.satisfaction')+':'">
                      <el-select size="mini" v-model.trim="form.appraiseKey" filterable :placeholder="$t('webchat.webchatAll')">
                        <el-option value="" :label="'--'+$t('webchat.webchatAll')+'--'"></el-option>
                        <el-option :label="'--'+$t('public.unevaluated')+'--'" value="unevaluated"></el-option>
                        <el-option
                          v-for="(item, index) in appraiseList"
                          :key="index"
                          :label="item.name"
                          :value="item.key"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('qualityCheck.endTheSessionType')+':'">
                      <!-- <el-select size="mini" v-model.trim="form.finishKey" filterable :placeholder="$t('webchat.webchatAll')">
                        <el-option value="" :label="'--'+$t('webchat.webchatAll')+'--'"></el-option>
                        <el-option
                          v-for="(item, index) in finishReasonList"
                          :key="index"
                          :label="item.name"
                          :value="item.key"
                        >
                        </el-option>
                      </el-select> -->
                      <el-cascader
                        popper-class="webchat-finish"
                        style="width: 100%"
                        :options="closeOptions"
                        filterable
                        v-model.trim="activeFinish"
                        change-on-select
                      ></el-cascader>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('qualityCheck.checkTime')+':'">
                      <el-date-picker size="mini"
                                      :id="['k1','k2']"
                                      v-model.trim="form.checkTime"
                                      :editable="boolean"
                                      type="datetimerange"
                                      :picker-options="pickerOptions2"
                                      :placeholder="$t('public.timeRanges')"
                                      align="right"
                                      @change="checkTimeChange">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item :label="$t('qualityCheck.qualityRating')+':'">
                      <el-select size="mini" v-if="!template.gradeConfig" v-model.trim="form.LEVEL" multiple filterable :placeholder="$t('webchat.webchatAll')">
                        <el-option :label="$t('qualityCheck.excellent')" value='0'></el-option>
                        <el-option :label="$t('qualityCheck.qualified')" value='1'></el-option>
                        <el-option :label="$t('qualityCheck.remind')" value='2'></el-option>
                        <el-option :label="$t('qualityCheck.unqualified')" value='3'></el-option>
                      </el-select>
                      <el-select v-else size="mini" v-model.trim="form.LEVEL" filterable multiple :placeholder="$t('webchat.webchatAll')">
                         <el-option
                          v-for="(item, index) in template.gradeConfig"
                          :key="index"
                          :label="item.name"
                          :value="index">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                      <el-form-item :label="$t('webchat.msgNum')+':'">
                        <el-radio-group style="margin-left:-14px;width:calc(100% - 65px);" v-model.trim="form.msgCountType">
                          <el-radio size="mini" label="gt" >{{$t('webchat.moreThan')}}</el-radio>
                          <el-radio size="mini" label="lt" >{{$t('webchat.lessThan')}}</el-radio>
                          <el-radio size="mini" label="eq" >{{$t('webchat.equal')}}</el-radio>
                        </el-radio-group>
                        <el-input style="width:60px;" size="mini" v-model.trim="form.msgCount" :placeholder="$t('public.pleaseInput')"></el-input>
                      </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <div class="tem">
                      <el-form-item :label="$t('qualityCheck.singleScore')+':'">
                        <el-select style="width:calc(100% - 278px);margin-right:10px;" size="mini" v-model="form.GRADE_CONFIG" @change="configChange">
                          <el-option value="" :label="'--'+$t('public.pleasePick')+'--'"></el-option>
                          <el-option
                            v-for="(item, index) in configList"
                            :key="index"
                            :label="item.name"
                            :value="item.order">
                          </el-option>
                        </el-select>
                        <el-input size="mini" :placeholder="GRADE_P" v-model="form.GRADE_MIN" style="width:110px"></el-input>
                        <span style="margin: 0 10px 0 10px;font-size: 12px;">{{$t('public.to')}}</span>
                        <el-input size="minii" :placeholder="GRADE_P" v-model="form.GRADE_MAX" style="width:110px"></el-input>
                      </el-form-item>
                    </div>
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item :label="$t('public.queues')+':'">
                      <el-select size="mini" v-model.trim="form.toPeer" multiple filterable :placeholder="$t('qualityCheck.skillGroupSearch')">
                        <el-option
                          v-for="(item, index) in queueList"
                          :key="index"
                          :label="item.DisplayName"
                          :value="item.Exten">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('qualityCheck.qualityControlPersonnel')+':'">
                      <m7-select size="mini" :options="selectAgents" v-model.trim="form.grade_user" multiple filterable :placeholder="$t('public.pickAgentTip1')">
                      </m7-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('webchat.platformSource')+':'">
                      <el-select size="mini" v-model.trim="form.platform" :placeholder="$t('public.all')">
                        <el-option :label="'--'+$t('webchat.webchatAll')+'--'" value=""></el-option>
                        <el-option
                          v-for="(item, index) in platforms"
                          :key="index"
                          :label="item.label"
                          :value="item.value"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <!--<div>-->
                      <el-form-item :label="$t('public.agent')+':'">
                        <!--              <el-select size="mini" v-model.trim="form.user" multiple filterable :placeholder="$t('public.pickAgentTip1')">
                                        <el-option
                                          v-for="item in agentList"
                                          :label="item.displayName"
                                          :value="item._id">
                                          <span >{{ item.displayName }}</span>
                                          <span >[<span>{{ item.exten }}</span>]</span>
                                        </el-option>
                                      </el-select>-->
                        <el-popover
                          ref="popover5"
                          placement="bottom"
                          @show="popoverWebchatShow"
                          v-model.trim="popoverVisableWeb"
                          width="240"
                          trigger="click">
                          <agent-tree :readSeat="folllowedWebchatAgents" :visable="popoverVisableWeb" ref="agentTreeWebchat" @saveFollowedAgents="saveFollowedWebchatAgents"></agent-tree>
                        </el-popover>
                        <!--<span type="primary" class="follow-agent-wrap-btn" v-popover:popover5><i class="el-icon-plus"></i> {{$t('qualityCheck.batchAddAgent')}}</span>-->
                        <div class="follow-agent-wrap" v-popover:popover5 style="width:calc(100% - 30px);">
                          <span class="follow-agent follow-common" v-for="item in folllowedWebchatAgents" :key="item._id">{{item.label}}
                            <i class="el-icon-close" @click.stop="closeFollowedWebchatAgents(item._id)"></i>
                          </span>
                          <div>
                            <span type="primary" class="follow-agent-wrap-btn"><i class="el-icon-arrow-down" style="color: #c0c4cc"></i></span>
                          </div>
                        </div>
                      </el-form-item>
                    <!--</div>-->
                  </el-col>
                </el-row>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item :label="$t('qualityCheck.sessionId')">
                      <el-input size="mini" :placeholder="$t('qualityCheck.pleaseEnterSessionId')" v-model.trim="form._id"></el-input>
                    </el-form-item>
                  </el-col>
                  <!-- 提交时间查询 -->
                  <el-col :span="6">
                    <el-form-item :label="$t('public.submitTime')+':'">
                      <el-date-picker size="mini"
                                      :id="['o1','o2']"
                                      v-model.trim="form.submitTime"
                                      :editable="boolean"
                                      type="datetimerange"
                                      :picker-options="pickerOptions2"
                                      :placeholder="$t('public.timeRanges')"
                                      align="right"
                                      @change="submitTimeChange">
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item :label="$t('public.customerName')+':'">
                      <el-input size="mini" v-model.trim="form.sName" :placeholder="$t('public.pleaseEnter')"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </div>
          </div>
        </template>
      </Unfold>
      <div class="sub">
        <el-button class="primary_btn" @click="rest">{{$t('public.reset')}}</el-button>
        <el-button type="primary" class="search primary_btn" @click="queryList">{{$t('public.search2')}}</el-button>
      </div>
      <affix :label="$t('public.searchResult')"></affix>
      <div class="sub export">
        <el-button type="primary" class="search primary_btn" @click="ran">{{$t('qualityCheck.paiming')}}</el-button>
        <el-button type="primary" class="search primary_btn" @click="expor">{{$t('report.exportXls')}}</el-button>
      </div>
      </div>
    <div>
        <webchat-grade :webchatDialogShow="webchatDialogShow" v-if="webChatIsShow" @close="off" :reGrade="true" :currentGrade = "currentGrade" :currentItem = "currentItem" :refreshNum="refreshNum" :currentItemWebchat="this.currentItemWebchat" :template = "template" @off="off" @handle="handle" @saveGrade="saveGrade"></webchat-grade>
        <call-grade :callDialogShow="callDialogShow" v-if="callIsShow" @close="off" :flagId="flagId" :reGrade="true" :currentItemCall = "this.currentItemCall"  :currentGrade = "currentGrade"  :template = "this.template" @saveGrade="saveGrade" :qcResectLabel="qcResectLabel" @off="off" @handle="handle" :refreshCallGrade="refreshCallGrade" :disabled="lookGrade"></call-grade>
    </div>
    <div class="tables" v-show="!isHaveData" v-loading="tableLoading">
      <div class="deploy">
        <div class="table-header-config">
          <i class="iconfont icon-peizhi"></i>
          <span class="tex" @click.stop="setHeaderConfig">{{$t('report.setHeaderConfig')}}</span>
        </div>
         <div class="search-pagination">
           <pagination
                   :small="pagination.small"
                   :currentPage="pagination.currentPage"
                   :count="count"
                   @turnPage="turnPage"
                   :totalPage="totalPage">
           </pagination>
         </div>
      </div>
      <div class="loading">
        <div v-show="template.QUALITY_TYPE==='qualityWebchat'">
          <el-table :data="tableDataWebchat" size="mini">
            <el-table-column
              :width="item.name === 'beginTime' || item.name === 'qtime' ? '160' : '100'"
              v-for="(item, index) in tableDataHeaderWebchat.Config"
              :key="'webTable' + index"
              v-if="item.show === true"
              :prop="item.name"
              :label="item.displayname">
            </el-table-column>
            <el-table-column :label="$t('qualityCheck.makeLevel')">
              <template scope="scope">
                <div v-if="!template.gradeConfig">
                  <span v-show="scope.row.GRADE_AMOUNT >= Number(template['A-begin'] || 95)">{{$t('qualityCheck.excellent')}}</span>
                  <span v-show="scope.row.GRADE_AMOUNT >= Number(template['B-begin'] || 80) && scope.row.GRADE_AMOUNT <= Number(template['B-end'] || 94)">{{$t('qualityCheck.qualified')}}</span>
                  <span v-show="scope.row.GRADE_AMOUNT >= Number(template['C-begin'] || 60) && scope.row.GRADE_AMOUNT <= Number(template['C-end'] || 79)">{{$t('qualityCheck.remind')}}</span>
                  <span v-show="scope.row.GRADE_AMOUNT <= Number(template['D-end'] || 59)">{{$t('qualityCheck.unqualified')}}</span>
                </div>
                <div v-else v-for="(item,index) of template.gradeConfig" :key='index' >
                  <span v-if="scope.row.GRADE_AMOUNT >= Number(item.begin) && scope.row.GRADE_AMOUNT <= Number(item.end)">{{item.name}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="GRADE_AMOUNT" :label="$t('qualityCheck.qualityGrade')">
            </el-table-column>
            <el-table-column
              v-for="(item, index) in configList"
              :key="index"
              :prop="item.order"
              :label="item.name">
              <!--:render-header="renderContent"-->
            </el-table-column>
            <el-table-column  :label="$t('public.operate')" width="160" fixed="right">
              <template scope="scope">
                <el-button type="text" @click="look(scope.row.grade_comments)" size="small" >{{$t('qualityCheck.viewLog')}}</el-button>
                <el-button style="margin-left: 8px;" type="text" @click="looklog(scope.row._id)" size="small" >{{$t('qualityCheck.viewLook')}}</el-button>
                <el-button style="margin-left: 8px;" type="text" @click="againGrade(scope.row)" size="small" v-show="scope.row.grade_user === $store.state.session.user._id">{{$t('qualityCheck.againGrade')}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 通话质检pass表格组件 -->
        <pass-table :headerOptions="tableDataHeaderCall.Config" :configList="this.configList" :tableData="tableDataCall" :template="template" :floors="floors"
                    @handle="handle" @down="down" @look="look" @looklog="looklog" @againGrade="againGrade" v-show="template.QUALITY_TYPE!=='qualityWebchat' && template.type==='pass'">
        </pass-table>
        <!-- 通话质检score表格组件 -->
        <score-table :headerOptions="tableDataHeaderCall.Config" :configList="this.configList" :tableData="tableDataCall" :template="template"  @down="down" @look="look" @handle="handle" @looklog="looklog" @againGrade="againGrade" v-show="template.QUALITY_TYPE!=='qualityWebchat' && template.type!=='pass'"></score-table>
      </div>
    </div>
    <div v-show="isHaveData" style="text-align: center;padding: 20px;">
      {{$t('public.noData')}}
    </div>
    <div v-show="!isSearchState" style="text-align: center;padding: 20px;">
      {{$t('public.pleaseSearch')}}
    </div>
    <el-dialog modal-append-to-body lock-scroll top="10%" :visible.sync="isLis" :title="$t('qualityCheck.ListenToTheRecording')" @close="offAudio" @open="openAudio">
      <old-audio-common v-if="showOld" flagId="result_listen_old" :srcUrl="audioListen" :refreshAudio="refreshAudio" :isShowAudioDownload="false" :isShowSubmitAudio="false" :currentObj="{}" :pauseAudio="pauseAudio"></old-audio-common>
      <audio-common v-if="!showOld" flagId="result_listen" @showOldAudio="showOldAudio" callStatus='dealing' :srcUrl="audioListen" :refreshAudio="refreshAudio" :isShowAudioDownload="false" :isShowSubmitAudio="false" :currentObj="{}" :pauseAudio="pauseAudio"></audio-common>
    </el-dialog>
    <el-dialog :close-on-click-modal="false" modal-append-to-body lock-scroll top="10%" :visible.sync="isLook" :title="$t('qualityCheck.viewLog')">
      <span class="conte">{{$t('km.content')}}</span>
      <p class="cont">
        {{content}}
      </p>
    </el-dialog>
    <div class="looklog">
      <el-dialog :close-on-click-modal="false" modal-append-to-body lock-scroll top="10%" :visible.sync="isShow" :title="title">
        <div class="tables">
        <div class="deploy">
           <div class="search-pagination">
            <pagination
                    :small="paginationRecord.small"
                    :currentPage="paginationRecord.currentPage"
                    :count="countRecord"
                    @turnPage="turnPageRecord"
                    :totalPage="totalPageRecord"
                    >
            </pagination>
           </div>
        </div>
        <el-table :data="recordList" style="width: 100%" size="mini">
          <el-table-column prop="user" :label="listenpp" width="">
          </el-table-column>
          <el-table-column prop="" label="" width="">
          </el-table-column>
          <el-table-column prop="time" :label="listenTime" width="">
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    </div>
    <el-dialog :close-on-click-modal="false" modal-append-to-body lock-scroll top="10%" :visible.sync="isRan" :title="$t('qualityCheck.paiming')">
      <div class="find">
        <span class="temp" style="display: inline-block;width: 100px;">{{$t('public.disposeAgent')}}：</span>
          <m7-select class="m7_slect" size="mini" :options="selectAgents" v-model.trim="rank.RANKING_AGENT" multiple filterable :placeholder="$t('public.pleasePick')">
          </m7-select>
        <el-checkbox v-model.trim="rank.includeSubordinate">{{$t('public.includeUnderAgent')}}</el-checkbox>
        <el-button type="primary" class="primary_btn fr" @click="findRank">{{$t('public.search2')}}</el-button>
      </div>
      <div class="find">
        <span class="temp" style="display: inline-block;width: 100px;">{{$t('public.timeRanges')}}：</span>
        <el-date-picker size="mini"
                        :id="['j11','j21']"
                        v-model="rank.rankTime"
                        :editable="boolean"
                        type="datetimerange"
                        :picker-options="pickerOptions2"
                        :placeholder="$t('public.timeRanges')"
                        align="right">
        </el-date-picker>
      </div>
      <el-table :data="rankingList" size="mini">
        <el-table-column
          v-for="(item, index) in rankingHeadList"
          :key="index"
          :prop="item.order"
          :label="item.name"
          >
        </el-table-column>
      </el-table>
    </el-dialog>
    <!--配置表头-->
    <header-option v-show="isShowTableConfig" :show="isShowTableConfig" :option="headOptions" :type="tableConfigType" v-on:close="closeTableConfig"></header-option>
  </div>
</template>
<script>
  import Pagination from '@/components/public-modules/card/Pagination'
  import {deepClone, getDateTime, getFormatDateTime, getCache, scopeAgents, m7Language, updateAllOptions, initFinishName, isHasFunc} from '@/utils/m7Utils.js'
  import {getQualityCheckConfigs} from '@/utils/webchat.js'
  import {checkform} from '@/utils/validate.js'
  import WebchatGrade from './Check/WebchatGrade'
  import CallGrade from './Check/CallGrade.vue'
  import PassTable from './Check/PassTable'
  import ScoreTable from './Check/ScoreTable'
  import LabelCascader from '@/components/public-modules/phone-bar/LabelCascader.vue'
  import Affix from '../../ui-modules/affix/Affix.vue'
  import questionToolTip from '../../ui-modules/questionToolTip/QuestionToolTip.vue'
  import AudioCommon from '@/components/public-modules/audio'
  import OldAudioCommon from '@/components/public-modules/audio/audio.vue'
  import AgentTree from './base/qualityAgentTree.vue'
  import Unfold from '../../ui-modules/unfold/index.vue'
  import headerOption from '../report/base/headerOption.vue'
//  import bus from '@/store/eventBus'
  export default {
    name: 'quality_result',
    data () {
      let self = this
      let validate1 = (rule, value, callback) => {
        if (value !== '') {
          let match = checkform(value, 'Number3')
          if (match) {
            callback(new Error(this.$t('qualityCheck.pleaseEnterNum')))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
      let validateLimit = (rule, value, callback) => {
        if (value !== '') {
          if (parseInt(value) > self.GRADE_P.split('-')[1]) {
            callback(new Error(this.$t('qualityCheck.PleaseEnterTheCorrectScoreRange')))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
      let validate2 = (rule, value, callback) => {
        let item = null
        if (self.template.QUALITY_TYPE === 'qualityWebchat') {
          item = self.form
        } else {
          item = self.callForm
        }
        if (item.GRADE_MAX !== '' && item.GRADE_MIN !== '') {
          if (parseInt(item.GRADE_MAX) < item.GRADE_MIN) {
            callback(new Error(this.$t('qualityCheck.PleaseEnterTheCorrectScoreRange')))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
      let validateCallLength = (rule, value, callback) => {
        let item = self.callForm
        if (item.CALL_TIME_LENGTH_BEGIN !== '' && item.CALL_TIME_LENGTH_END !== '') {
          if (parseInt(item.CALL_TIME_LENGTH_END) < item.CALL_TIME_LENGTH_BEGIN) {
            callback(new Error(this.$t('qualityCheck.PleaseEnterTheCorrectCallDurationRrange')))
          } else {
            callback()
          }
        } else {
          callback()
        }
      }
      return {
        callNumFlag: true, // 是否没有通话模板
        webchatNumFlag: true, // 是否没有在线模板
        pauseAudio: 'open',
        showOld: false,
        webOrCallTemp: 1,  //   质检模板分类
        floors: 1,
        floorsOption: [],
        webchatDialogShow: false,
        rank: {
          RANKING_AGENT: [],
          includeSubordinate: false,
          rankTime: ''
        },
        value: 0,
        num: 0,
        isHaveData: false,
        isSearchState: false,
        once: true,
        boolean: false,
        labelType: 'single',
        labelDataCache: [],
        labelData: {},
        isShow: false,
        isLis: false,
        isLook: false,
        isRan: false,
        content: '',
        audioListen: '',
        closeOptions: [],
        sessionOptions: [],
        platforms: [
          {label: this.$t('webchat.websiteCon'), value: 'pc'},
          {label: this.$t('webchat.wapCon'), value: 'wap'},
          {label: this.$t('webchat.appCon'), value: 'sdk'},
          {label: this.$t('webchat.weChatCon'), value: 'weixin'},
          {label: this.$t('webchat.weChatMini'), value: 'wxmini'},
          {label: this.$t('webchat.weBoCon'), value: 'weibo'},
          {label: this.$t('webchat.enterpriseShot'), value: 'wxwork'},
          {label: this.$t('webchat.baiduBCP'), value: 'ocpc'},
          {label: this.$t('webchat.TikTok'), value: 'dy'},
          {label: this.$t('webchat.platformWXKF'), value: 'wxkf'}
        ],
        rules: {
          GRADE_MIN: [
            {validator: validate1, trigger: 'blur'},
            {validator: validateLimit, trigger: 'blur'},
            {validator: validate2, trigger: 'blur'}
          ],
          GRADE_MAX: [
            {validator: validate1, trigger: 'blur'},
            {validator: validateLimit, trigger: 'blur'},
            {validator: validate2, trigger: 'blur'}
          ],
          msgCount: [
            {validator: validate1, trigger: 'blur'}
          ],
          CALL_NO: [
            {validator: validate1, trigger: 'blur'}
          ],
          CALLED_NO: [
            {validator: validate1, trigger: 'blur'}
          ],
          CALL_TIME_LENGTH_BEGIN: [
            {validator: validate1, trigger: 'blur'},
            {validator: validateCallLength, trigger: 'blur'}
          ],
          CALL_TIME_LENGTH_END: [
            {validator: validate1, trigger: 'blur'},
            {validator: validateCallLength, trigger: 'blur'}
          ]
        },
        pickerOptions2: {
          shortcuts: [{
            text: this.$t('sms.thisOneWeek'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisOneMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: this.$t('sms.thisThreeMonth'),
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        taskTems: [],
        recordList: [],
        finishReasonList: [],
        activeFinish: [],
        agentList: [],
        callTypeList: [],
        callAgentList: [],
        appraiseList: [],
        callQueueList: [],
        queueList: [],
        resetSelect: false,
        satisfactionList: [],
        items: [],
        pagination: {
          small: false,
          currentPage: 1
        },
        currentId: '',
        template: {
        },
        getWebchatCache: false,
        getCallCache: false,
        taskList: [],
        form: {
          TASK_ID: '',
          toPeer: [],
          user: [],
          grade_user: [],
          LEVEL: '',
          GRADE_CONFIG: '',
          GRADE_MIN: '',
          GRADE_MAX: '',
          appraiseKey: '',
          claimTime: '',
          submitTime: '',
          sName: '',
          finishKey: '',
          msgCount: '',
          msgCountType: '',
          checkTime: '',
          platform: '',
          sessionId: '',
          GRADE_AMOUNTS:[],
        },
        callForm: {
          TASK_ID: '',
          callTime: '',
          DISPOSAL_AGENT: [],
          CONNECT_TYPE: [],
          CALLED_NO: '',
          CALL_NO: '',
          GRADE_TIME: '',
          SUBMITTED_TIME: '',
          _id: '',//通话编号
//          INVESTIGATE: '',
          LEVEL: [],
          CALL_TIME_LENGTH_BEGIN: '',
          CALL_TIME_LENGTH_END: '',
          GRADE_CONFIG: '',
          GRADE_MIN: '',
          GRADE_MAX: '',
          GRADE_AMOUNT: '',
          GRADE_USER: [],
          ERROR_MEMO: [],
          GRADE_AMOUNTS:[],
          includeSubordinate: false,
          amount: '',
//          singleLabel: '',
//          multiFirst: '',
//          multiTwo: '',
//          multiThree: '',
          RECORDING_FROM: '',
          RECORDING_PERFORMANCE: '',
          monitorType: [],
          SERVICE_QUALITY: []
        },
        investigateArray: [],//  二级满意度数据
        INVESTIGATE: [],  //  二级满意度条件
        monitorTypeList: [],
        GRADE_P: '0-100',
        paginationRecord: {
          small: false,
          currentPage: 1
        },
        currentItem: {},
        currentItemCall: {},
        title: '',
        lookGrade: false,
        refreshCallGrade: 0,
        refreshNum: 0,
        callDialogShow: false,
        qcResectLabel: false,
        newSqLabel: [],
        flagId: 'result',
        currentGrade: {},
        configList: [],
        countRecord: 0,
        totalPageRecord: 0,
        listenpp: '',
        listenTime: '',
        rankingHeadList: '',
        refreshAudio: 0,
        tableLoading: true,
        tableDataCall: [],
        tableDataWebchat: [],
        qualityResultAgent: false,      //  接听座席是否展示
        currentItemWebchat: {},
        tableDataHeaderCall: {
          Config: [{ 'order': '1', 'name': 'CALL_NO_SHOW', 'displayname': '主叫号码', 'show': true }, { 'order': '2', 'name': 'DISPOSAL_AGENT', 'displayname': '接听座席', 'show': true }, { 'order': '3', 'name': 'CALLED_NO_SHOW', 'displayname': '被叫号码', 'show': true }, { 'order': '4', 'name': 'CONNECT_TYPE_show', 'displayname': '呼叫类型', 'show': true }, { 'order': '5', 'name': 'ERROR_MEMO', 'displayname': '呼入技能组', 'show': true }, { 'order': '6', 'name': 'INVESTIGATE', 'displayname': '满意度', 'show': true }, { 'order': '7', 'name': 'OFFERING_TIME', 'displayname': '呼叫时间', 'show': true }, { 'order': '8', 'name': 'GRADE_TIME', 'displayname': '质检时间', 'show': true }, { 'order': '9', 'name': 'callTimeDisplay', 'displayname': '通话时长', 'show': true }, { 'order': '10', 'name': 'GRADE_USER_SHOW', 'displayname': '质检人员', 'show': true }, { 'order': '11', 'name': 'monitorTypeName', 'displayname': '监控类型', 'show': true }, { 'order': '12', 'name': 'QC_SUBMIT_SHOW', 'displayname': '录音来源', 'show': true }, { 'order': '13', 'name': 'RECORDING_PERFORMANCE_SHOW', 'displayname': '绩效录音', 'show': true }, { 'order': '14', 'name': 'submit_time', 'displayname': '座席提交时间', 'show': true }, { 'order': '15', 'name': 'SQ_LABEL_SHOW', 'displayname': '服务品质标签', 'show': true }]
        },
        tableDataHeaderWebchat: {
          Config: [{ 'order': '1', 'name': 'beginTime', 'displayname': '会话领取时间', 'show': true }, { 'order': '2', 'name': 'sName', 'displayname': '客户名称', 'show': true }, { 'order': '3', 'name': 'userName', 'displayname': '处理座席', 'show': true }, { 'order': '4', 'name': 'queueName', 'displayname': '技能组', 'show': true }, { 'order': '5', 'name': 'totalMsgCount', 'displayname': '消息条数', 'show': true }, { 'order': '6', 'name': 'platformSourceName', 'displayname': '平台来源', 'show': true }, { 'order': '7', 'name': 'qtime', 'displayname': '质检时间', 'show': true }, { 'order': '8', 'name': 'gradeUserName', 'displayname': '质检人', 'show': true }]
        },
        unfoldTitle: [], // 展开收起标题
        isShowFold: true, // 展开收起标题
        callIsShow: false, // 通话评分
        webChatIsShow: false, // 在线咨询评分
        tableConfigType: 'quality_result_call_table_title',   //   配置表头
        isShowTableConfig: false,
        headOptions: {},
        finishOptions: {},          //  在线结束会话类型列表
        popoverVisableCall: false,    //  座席组件展开时  触发reset方法
        popoverVisableWeb: false    //  座席组件展开时  触发reset方法
      }
    },
    components: {
      Pagination,
      PassTable,
      ScoreTable,
      WebchatGrade,
      CallGrade,
      LabelCascader,
      Affix,
      AudioCommon,
      OldAudioCommon,
      AgentTree,
      questionToolTip,
      Unfold,
      headerOption
    },
    methods: {
      showOldAudio (curr) {
        this.showOld = curr
      },
      taskTemChange () {
        if (this.callForm.TASK_ID !== '') {
          let temId = ''
          this.taskTems.forEach(item => {
            if (this.callForm.TASK_ID === item._id) {
              temId = item.query.TASK_TEMPLATE
            }
          })
          let num = 0
          this.items.forEach((one, index) => {
            if (temId === one._id) {
              num = index
            }
          })
          this.value = num
          this.change(this.value)
        } else {
          this.queryList()
        }
      },
      off () {
        let play = document.getElementById('quality-autoplay_' + this.flagId + '_old')
        if (play) {
          play.pause()
        }
        this.webchatDialogShow = false
        this.callDialogShow = false
      },
      labelSelect (data) { // 子组件外抛出来的表单
        this.resetSelect = false
        if (data.type === 'single') {
          this.labelType = 'single'
          delete this.callForm.multiLabel
          this.callForm.singleLabel = data.arr[0] || ''
        } else {
          this.labelType = 'multi'
          this.callForm.multiLabel = data.arr && data.arr[0] ? data.arr : []
          delete this.callForm.singleLabel
        }
      },
      offAudio () {
        let play = document.getElementById('quality-autoplay_result_listen_old')
        if (play) {
          play.pause()
        }
        this.pauseAudio = 'close'
      },
      openAudio () {
        this.pauseAudio = 'open'
      },
      saveGrade (gradeObj, SQlabel, monitorType, submitTime, RECORDING_PERFORMANCE, QC_SUBMIT) {
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          let data = deepClone(gradeObj)
          data._id = this.currentItem._id
          data.comments = gradeObj.COMMENT
          data.grade_data = gradeObj.obj
          data.grade_data['COMMENTS'] = gradeObj.COMMENTS
          data.grade_data['GRADE_AMOUNT'] = gradeObj.grade
          data.grade_data['type'] = 'grade'
          let self = this
          this.$store.dispatch('saveWebchatSessionGrade', data).then((res) => {
            if (res && res.success) {
              self.$message.success(self.$t('qualityCheck.regradeSuccess'))
              self.webchatDialogShow = false
              self.query()
            }
          })
        } else if (this.template.type === 'pass') {
          let GRADE_DATA = {}
          GRADE_DATA._id = this.currentItemCall._id
          GRADE_DATA.GRADE_AMOUNT = gradeObj.config
          GRADE_DATA.GRADE_AMOUNT.amount = gradeObj.grade.amount
          GRADE_DATA.COMMENTS = gradeObj.grade.COMMENT
          GRADE_DATA.SQ_LABEL = SQlabel
          GRADE_DATA.QC_SUBMIT = QC_SUBMIT
          GRADE_DATA.monitorType = monitorType
          GRADE_DATA.submit_time = submitTime
          GRADE_DATA.RECORDING_PERFORMANCE = RECORDING_PERFORMANCE
          let data = {}
          data.GRADE_DATA = GRADE_DATA
          let self = this
          this.$store.dispatch('updataCallGrade', {data}).then((res) => {
            if (res.success) {
              self.$message.success(self.$t('qualityCheck.regradeSuccess'))
              self.query()
            }
            self.callDialogShow = false
            self.qcResectLabel = false
          })
        } else {
          let GRADE_DATA = {}
          GRADE_DATA._id = this.currentItemCall._id
          GRADE_DATA.GRADE_AMOUNT = gradeObj.grade
          GRADE_DATA.COMMENTS = gradeObj.COMMENT
          GRADE_DATA.SQ_LABEL = SQlabel
          GRADE_DATA.QC_SUBMIT = QC_SUBMIT
          GRADE_DATA.monitorType = monitorType
          GRADE_DATA.submit_time = submitTime
          GRADE_DATA.RECORDING_PERFORMANCE = RECORDING_PERFORMANCE
          for (let i in gradeObj.obj) {
            GRADE_DATA[i] = gradeObj.obj[i]
          }
          GRADE_DATA.type = 'grade'
          let data = {}
          data.GRADE_DATA = GRADE_DATA
          let self = this
          this.$store.dispatch('updataCallGrade', {data}).then((res) => {
            if (res.success) {
              self.$message.success(self.$t('qualityCheck.regradeSuccess'))
              self.query()
            }
            self.callDialogShow = false
            self.qcResectLabel = false
          })
        }
      },
      againGrade (data, look) {
        if (look === 'look') {
          this.lookGrade = true
        } else {
          this.lookGrade = false
        }
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.$store.dispatch('recordWebchatSessionLog', {_id: data._id})
          this.$store.dispatch('queryBusiness', {linkWebchat: data._id, sid: data.sid}).then((response) => {
            if (response && response.length > 0) {
              data.busHistory = [response[0]]
            } else {
              data.busHistory = []
            }
            this.currentItemWebchat = data
          })
          let item = {}
          for (let i = 0; i < this.$store.state.qualityCheck.queryGradeList.sessionList.length; i++) {
            if (this.$store.state.qualityCheck.queryGradeList.sessionList[i]._id === data._id) {
              item = deepClone(this.$store.state.qualityCheck.queryGradeList.sessionList[i])
              if (!item.beginTime) {
                item.beginTime = ''
              }
              if (!item.totalMsgCount) {
                item.totalMsgCount = 0
              }
              if (item.sourceName && item.sName) {
                item.custName = item.sName
              }
              if (!item.sourceName) {
                item.sourceName = item.sName
              }
              if (item.firstReplyTime) {
                item.firstTime = getFormatDateTime(new Date(item.firstReplyTime))
              }
              let satisfaction = ''
              let appraiseKey = item.appraiseKey ? item.appraiseKey : ''
              if (appraiseKey === '') {
                satisfaction = ''
              } else {
                var channelDic = getCache('channelDic') || []
                let webchatCSR = []
                for (let i = 0; i < channelDic.length; i++) {
                  var obj = channelDic[i]
                  if (obj.type === 'webchatCSR') {
                    webchatCSR = obj.options || []
                    break
                  }
                }
                for (let n = 0; n < webchatCSR.length; n++) {
                  if (webchatCSR[n].key === appraiseKey) {
                    satisfaction = webchatCSR[n].name
                  }
                }
              }
              if (item.finishKey) {
                item.finishReasonTitle = this.finishOptions[item.finishKey] || ''
              } else {
                item.finishReasonTitle = ''
              }
              item.satisfaction = satisfaction
              item.userName = data.userName
              break
            }
          }
          this.webchatDialogShow = true
          let self = this
          self.currentItem = item
          self.currentGrade = data
          self.webChatIsShow = true
          self.refreshNum = Math.random()
        } else {
          this.callDialogShow = true
          this.qcResectLabel = true
          this.$store.dispatch('recordListenLog', {CALL_SHEET_ID: data._id})
          let pro1 = this.$store.dispatch('queryBusiness', {callId: data._id, customer: data.CUSTOMER_ID})
          let pro2 = this.$store.dispatch('getQualityedCheckCallSheet', {data: data._id})
          Promise.all([pro1, pro2]).then(([rep1, rep2]) => {
            if (rep2 === null) {
              this.callDialogShow = false
              this.$message.error(this.$t('qualityCheck.callRecordDelete'))
              return
            }
//            let current = deepClone(data)
            let current = JSON.parse(JSON.stringify(data))
            let self = this
            let fileList = data.RECORD_FILE_NAME.split('/')
            let userPbx = fileList[1]
            current.PBX = userPbx
            current.CUSTOMER_NAME = rep2.CUSTOMER_NAME
            current.BEGIN_TIME = rep2.BEGIN_TIME
            current.STATUS_show = rep2.STATUS_show
            current.DISPOSAL_AGENT_show = rep2.DISPOSAL_AGENT_show
            current.PROVINCE = rep2.PROVINCE
            current.PROVINCE = rep2.PROVINCE
            current.DISTRICT = rep2.DISTRICT
            current.END_TIME = rep2.END_TIME
            current.LABELS = rep2.LABELS || []
            if (rep2.REPEAT_CALL) {
              current.repeatCall = rep2.REPEAT_CALL === '48h' ? self.$t('call.repeatCall48h') : self.$t('call.repeatCall24h')
            } else {
              current.repeatCall = '--'
            }
            if (current.QC_SUBMIT) {
              current.submitTime = current.submit_time
            }
            current.CALL_SHEET_ID = data._id
            if (rep1 && rep1.length > 0) {
              current.busHistory = [rep1[0]]
            } else {
              current.busHistory = []
            }
            self.currentItemCall = deepClone(current)
            self.currentGrade = deepClone(current)
            self.refreshCallGrade = Math.random()
            self.currentItemCall.COMMENTS = rep2.COMMENTS || ''
            self.callIsShow = true
          })
        }
      },
//      recordFileName (server, name, callBack) {
//        if (!server) {
//          callBack('')
//          return
//        }
//        debugger
//        let fileList = name.split('/')
//        let userPbx = fileList[1]
//        if (server.indexOf('record.7moor.com') > -1 || server.indexOf('m7-record.oss-cn-hangzhou') > -1) {
//          server = 'https' + server.substr(server.indexOf(':'), server.length)
//          callBack(server + '/' + name)
//        } else if (document.location.protocol !== 'https:') {
//          if (userPbx) {
//            getCache('accountPbx', userPbx, this, function (pbxObj) {
//              if (pbxObj) {
//                if (pbxObj.assDomain) {
//                  let assDomain = pbxObj.assDomain
//                  if (assDomain.substr(assDomain.length - 1, assDomain.length) === '/') {
//                    assDomain = assDomain.substr(0, assDomain.length - 1)
//                  }
//                  server = assDomain
//                }
//              }
//              callBack(server + '/' + name)
//            })
//          } else {
//            callBack(server + '/' + name)
//          }
//        } else {
//          callBack(server + '/' + name)
//        }
//      },
      claimTimeChange (value) {
        if (!value) {
          this.form.claimTime = ''
          this.form.beginTimeBegin = ''
          this.form.beginTimeEnd = ''
        }
      },
      checkTimeChange (value) {
        if (!value) {
          this.form.checkTime = ''
          this.form.CHECK_BEGIN_TIME = ''
          this.form.CHECK_END_TIME = ''
        }
      },
      submitTimeChange (value) {
        if (!value) {
          this.form.submitTime = ''
          this.form.applyQcWebchatTimeBegin = ''
          this.form.applyQcWebchatTimeEnd = ''
        }
      },
      callTimeChange (value) {
        if (!value) {
          this.callForm.callTime = ''
          this.callForm.BEGIN_TIME = ''
          this.callForm.END_TIME = ''
        }
      },
      gradeTimeChange (value) {
        if (!value) {
          this.callForm.GRADE_TIME = ''
          this.callForm.CHECK_BEGIN_TIME = ''
          this.callForm.CHECK_END_TIME = ''
        }
      },
      submittedTimeChange (value) {
        if (!value) {
          this.callForm.SUBMITTED_TIME = ''
          this.callForm.AGENT_BEGIN_TIME = ''
          this.callForm.AGENT_END_TIME = ''
        }
      },
      rest () {
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          for (let i in this.form) {
            if (typeof this.form[i] === 'object' && i !== 'claimTime' && i !== 'checkTime' && i !== 'submitTime') {
              this.form[i] = []
            } else {
              this.form[i] = ''
            }
          }
          this.activeFinish = ''
        } else {
          for (let i in this.callForm) {
            if (typeof this.callForm[i] === 'object' && i !== 'callTime' && i !== 'GRADE_TIME' && i !== 'SUBMITTED_TIME') {
              this.callForm[i] = []
            } else {
              this.callForm[i] = ''
            }
          }
          this.floors = 1
          this.INVESTIGATE = []
        }
        this.GRADE_P = '0-100'
        this.resetSelect = true
      },
      findRank () {
        this.rank.TEMPLATE = this.template._id
        this.rank.BEGIN_TIME = ''
        this.rank.END_TIME = ''
        if (this.rank.rankTime && this.rank.rankTime[0] !== null) {
          this.rank.BEGIN_TIME = getDateTime(this.rank.rankTime[0])
        }
        if (this.rank.rankTime && this.rank.rankTime[1] !== null) {
          this.rank.END_TIME = getDateTime(this.rank.rankTime[1])
        }
        let data = deepClone(this.rank)
        delete data.rankTime
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.$store.dispatch('agentChatRanking', data).then(() => {
//          self.rankingList = []
//          self.rankingList = self.$store.state.qualityCheck.agentRanking.rankingagenthtml
          })
        } else {
          this.$store.dispatch('agenCalltRanking', data).then(() => {
          })
        }
      },
      expor () {
        if (this.webOrCallTemp === 1 && !this.callNumFlag) { // 当前选择的是通话模板 && 没有一个可用的模板
          this.$message.error('您还没有可用的通话质检模板哦，请先配置通话质检模板')
          return false
        } else if (this.webOrCallTemp === 2 && !this.webchatNumFlag) { // 当前选择的是在线模板 && 没有一个可用的模板
          this.$message.error('您还没有可用的在线质检模板哦，请先配置在线质检模板')
          return false
        }
        let data = {}
        let self = this
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          data.Method = 'exportWebchatQualityCheckList'
          if (this.form.claimTime && this.form.claimTime[0] !== null) {
            this.form.beginTimeBegin = getDateTime(this.form.claimTime[0])
          }
          if (this.form.claimTime && this.form.claimTime[1] !== null) {
            this.form.beginTimeEnd = getDateTime(this.form.claimTime[1])
          }
          if (this.form.checkTime && this.form.checkTime[0] !== null) {
            this.form.CHECK_BEGIN_TIME = getDateTime(this.form.checkTime[0])
          }
          if (this.form.checkTime && this.form.checkTime[1] !== null) {
            this.form.CHECK_END_TIME = getDateTime(this.form.checkTime[1])
          }
          if (this.form.submitTime && this.form.submitTime[0] !== null) {
            this.form.applyQcWebchatTimeBegin = getDateTime(this.form.submitTime[0])
          }
          if (this.form.submitTime && this.form.submitTime[1] !== null) {
            this.form.applyQcWebchatTimeEnd = getDateTime(this.form.submitTime[1])
          }
          let query = deepClone(this.form)
          if(query.LEVEL.length==0){
            delete query.LEVEL
          }
          if(query.GRADE_AMOUNTS.length==0){
            delete query.GRADE_AMOUNTS
          }
          query.TEMPLATE = this.template._id
          query.dataDB = this.$store.state.session.account.dataDB
          query.tabType = 'quality_check_result'
          delete query.pageSize
          delete query.page
          delete query.checkTime
          delete query.claimTime
          delete query.submitTime
          if (!query.toPeer.length) {
            delete query.toPeer
          }
          data.Query = query
          this.$refs.form.validate((valid) => {
            if (valid) {
              self.$store.dispatch('exportQualityCheckResultExcel', data)
            } else {
              self.$message.error(self.$t('message.excelConditionError'))
            }
          })
        } else {
//          if (this.template.type === 'pass') {
//            this.$message.error(this.$t('qualityCheck.passTemNoexcelFun'))
//            return
//          }
          data.Method = 'exportQualityCheckList'
          if (this.callForm.callTime && this.callForm.callTime[0] !== null) {
            if (typeof this.callForm.callTime[0] === 'string') {
              this.callForm.BEGIN_TIME = this.callForm.callTime[0]
            } else {
              this.callForm.BEGIN_TIME = getDateTime(this.callForm.callTime[0])
            }
          }
          if (this.callForm.callTime && this.callForm.callTime[1] !== null) {
            if (typeof this.callForm.callTime[1] === 'string') {
              this.callForm.END_TIME = this.callForm.callTime[1]
            } else {
              this.callForm.END_TIME = getDateTime(this.callForm.callTime[1])
            }
          }
          if (this.callForm.GRADE_TIME && this.callForm.GRADE_TIME[0] !== null) {
            this.callForm.CHECK_BEGIN_TIME = getDateTime(this.callForm.GRADE_TIME[0])
          }
          if (this.callForm.GRADE_TIME && this.callForm.GRADE_TIME[1] !== null) {
            this.callForm.CHECK_END_TIME = getDateTime(this.callForm.GRADE_TIME[1])
          }
          if (this.callForm.SUBMITTED_TIME && this.callForm.SUBMITTED_TIME[0] !== null) {
            this.callForm.AGENT_BEGIN_TIME = getDateTime(this.callForm.SUBMITTED_TIME[0])
          }
          if (this.callForm.SUBMITTED_TIME && this.callForm.SUBMITTED_TIME[1] !== null) {
            this.callForm.AGENT_END_TIME = getDateTime(this.callForm.SUBMITTED_TIME[1])
          }
          let query = deepClone(this.callForm)
          query.tabType = 'quality_check_result'
          delete query.page
          delete query.pageSize
          if (!query.monitorType.length) {
            delete query.monitorType
          }
          if (!query.SERVICE_QUALITY.length) {
            delete query.SERVICE_QUALITY
          }
          if (!query.ERROR_MEMO.length) {
            delete query.ERROR_MEMO
          }
          query.dataDB = this.$store.state.session.account.dataDB
          query.floors = this.floors
          query.TEMPLATE = this.template._id
          query.labelType = this.labelType
          data.Query = query
          this.$refs.callForm.validate((valid) => {
            if (valid) {
              self.$store.dispatch('exportQualityCheckResultExcel', data)
            } else {
              self.$message.error(self.$t('message.excelConditionError'))
            }
          })
        }
      },
      handle (value) {
        this.$store.dispatch('recordListenLog', {CALL_SHEET_ID: value._id}).then((res) => {
          this.isLis = true
          this.audioListen = value.path
          this.refreshAudio = Math.random()
        })
      },
      down () {
        console.log(this.$t('qualityCheck.download'))
      },
      look (value) {
        this.isLook = true
        this.content = value
      },
      looklog (_id) {
        this.paginationRecord.currentPage = 1
        this.countRecord = 0
        this.totalPageRecord = 0
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.queryRecordWebchatSessionLog(_id, 1)
          this.isShow = true
        } else {
          this.isShow = true
          this.queryRecordCallListenLog(_id, 1)
        }
      },
      turnPageRecord (pageNum) {
        this.paginationRecord.currentPage = pageNum
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.queryRecordWebchatSessionLog(this.currentId, pageNum)
        } else {
          this.queryRecordCallListenLog(this.currentId, pageNum)
        }
      },
      queryRecordWebchatSessionLog (_id, page) {
        this.currentId = _id
        this.title = this.$t('qualityCheck.onlineWebchatLog')
        this.listenpp = this.$t('qualityCheck.checkPeople')
        this.listenTime = this.$t('qualityCheck.checkTime1')
        this.$store.dispatch('queryRecordWebchatSessionLog', {'sessionId': _id, 'page': page, 'pageSize': 10}).then(() => {
          this.recordList = this.$store.state.qualityCheck.recordList.list
          this.countRecord = this.$store.state.qualityCheck.recordList.count
          this.totalPageRecord = Math.ceil(this.$store.state.qualityCheck.recordList.count / 10) || 0
          this.isShow = true
        })
      },
      queryRecordCallListenLog (_id, page) {
        this.currentId = _id
        this.title = this.$t('qualityCheck.callQualityLookLog')
        this.listenpp = this.$t('qualityCheck.checkPeople')
        this.listenTime = this.$t('qualityCheck.checkTime1')
        this.$store.dispatch('queryRecordCallListenLog', {'CALL_SHEET_ID': _id, 'page': page, 'pageSize': 10}).then(() => {
          this.recordList = this.$store.state.qualityCheck.recordList.list
          this.countRecord = this.$store.state.qualityCheck.recordList.count
          this.totalPageRecord = Math.ceil(this.$store.state.qualityCheck.recordList.count / 10) || 0
          this.isShow = true
        })
      },
      ran () {
        if (this.webOrCallTemp === 1 && !this.callNumFlag) { // 当前选择的是通话模板 && 没有一个可用的模板
          this.$message.error('您还没有可用的通话质检模板哦，请先配置通话质检模板')
          return false
        } else if (this.webOrCallTemp === 2 && !this.webchatNumFlag) { // 当前选择的是在线模板 && 没有一个可用的模板
          this.$message.error('您还没有可用的在线质检模板哦，请先配置在线质检模板')
          return false
        }
        let self = this
        let end = new Date()
        let start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        this.rank.rankTime = [start, end]
        this.rank.RANKING_AGENT = []
        this.rank.includeSubordinate = false
        this.rank.TEMPLATE = this.template._id
        this.rank.BEGIN_TIME = ''
        this.rank.END_TIME = ''
        console.log(this.rank)
        if (this.rank.rankTime && this.rank.rankTime[0] !== null) {
          this.rank.BEGIN_TIME = getDateTime(this.rank.rankTime[0])
        }
        if (this.rank.rankTime && this.rank.rankTime[1] !== null) {
          this.rank.END_TIME = getDateTime(this.rank.rankTime[1])
        }
        let data = deepClone(this.rank)
        delete data.rankTime
        console.log(data)
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.$store.dispatch('agentChatRanking', data).then(() => {
            self.rankingHeadList = self.$store.state.qualityCheck.agentRanking.rankingagenthead
//          self.rankingList = self.$store.state.qualityCheck.agentRanking.rankingagenthtml
            self.isRan = true
          })
        } else {
          this.$store.dispatch('agenCalltRanking', data).then(() => {
            self.rankingHeadList = self.$store.state.qualityCheck.agentRanking.rankingagenthead
            self.isRan = true
          })
        }
      },
      configChange (value) {
        this.form.GRADE_MIN = ''
        this.form.GRADE_MAX = ''
        this.callForm.GRADE_MIN = ''
        this.callForm.GRADE_MAX = ''
        if (value === '') {
          this.GRADE_P = '0-100'
          return
        }
        for (let i = 0; i < this.configList.length; i++) {
          let item = this.configList[i]
          if (item.order === value) {
            this.GRADE_P = '0-' + item.weight
            break
          }
        }
      },
      change (index) {
        this.callForm.LEVEL = [];
        this.isSearchState = false
        this.$store.commit('qualityCheck/CLEAR_LIST')
        if (!this.items.length) {
          return
        }
        this.template = this.items[index]
        console.log(this.template,'this.template')
//        this.rest()
        let configs = deepClone(this.template.config)
        this.configList = getQualityCheckConfigs(configs)
        if (this.items[index].QUALITY_TYPE === 'qualityWebchat') {
          if (this.getWebchatCache === false) {
            this.renderWebchatCache()
          }
        } else {
          if (this.getCallCache === false) {
            this.renderCallCache()
          }
          if (this.template.type === 'pass') {
            let arr = []
            let renderForm = function (config) {
              config.forEach(item => {
                arr.push(item.name.split('-').length)
                if (item.child && item.child.length > 0) {
                  renderForm(item.child)
                }
              })
            }
            renderForm(this.template.config)
            if(arr.length>0){
              this.floorsOption = Math.max.apply(null, arr)
            } else {
              this.floorsOption = []
            }
            this.floors = 1
          }
        }
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.form.page = 1
        } else {
          this.callForm.page = 1
        }
        this.pagination.currentPage = 1
        this.queryQualityCheckList(1)
      },
      fetchData () {
        let self = this
        this.$store.dispatch('getCache', {type: 'qualityCheckTemplates'}).then((res) => {
          self.items = deepClone(res)
          this.tempStateChange()
//          self.template = res[this.num]
//          self.value = this.num
//          self.change(this.num)
          let configs = deepClone(self.template.config)
          self.configList = getQualityCheckConfigs(configs)
          self.$store.dispatch('getCache', {type: 'qualityTasks'}).then((res) => {
            res.forEach((item) => {
              if (item.hide === true) {
                self.taskList.push(item)
              }
            })
          })
        })
      },
      tempStateChange () {
        this.isHaveData = true
        this.isSearchState = false
        this.callForm.TASK_ID = ''
        let numFlag = false
        if (this.items && this.items.length > 0) {
          if (this.items[0] && !this.items[0]._id) {
            this.items.shift()
          }
          if (this.webOrCallTemp === 1) {
            this.items.some((item, index) => {
              if (item.QUALITY_TYPE !== 'qualityWebchat') {
                this.num = index
                numFlag = true
                this.isHaveData = false
                return item.QUALITY_TYPE !== 'qualityWebchat'
              }
            })
            if (!numFlag) { // 没有一个通话模板
              this.items.unshift({name: '--请选择--'})
              this.callNumFlag = false
            }
          } else {
            this.items.some((item, index) => {
              if (item.QUALITY_TYPE === 'qualityWebchat') {
                this.num = index
                numFlag = true
                this.isHaveData = false
                return item.QUALITY_TYPE === 'qualityWebchat'
              }
            })
            if (!numFlag) { // 没有一个在线模板
              this.items.unshift({name: '--请选择--'})
              this.webchatNumFlag = false
            }
          }
        } else {
          if (this.webOrCallTemp === 1) {
            this.callNumFlag = false
          } else {
            this.webchatNumFlag = false
          }
        }
        //   value 是 模板对应的 index
        this.value = this.num
//        if (this.once) {
        this.change(this.value)
        this.pagination.currentPage = 1
//          this.once = false
//        }
      },
      queryList () {
        if (this.webOrCallTemp === 1 && !this.callNumFlag) { // 当前选择的是通话模板 && 没有一个可用的模板
          this.$message.error('您还没有可用的通话质检模板哦，请先配置通话质检模板')
          return false
        } else if (this.webOrCallTemp === 2 && !this.webchatNumFlag) { // 当前选择的是在线模板 && 没有一个可用的模板
          this.$message.error('您还没有可用的在线质检模板哦，请先配置在线质检模板')
          return false
        }
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.form.page = 1
        } else {
          this.callForm.page = 1
        }
        this.pagination.currentPage = 1
        this.query()
      },
      //   查询
      query () {
        // this.pagination.currentPage = 1
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          // this.form.page = 1
          this.$refs.form.validate((valid) => {
            if (valid) {
              this.queryQualityCheckList(this.form.page)
            }
          })
        } else {
          // this.callForm.page = 1
          this.$refs.callForm.validate((valid) => {
            if (valid) {
              this.queryQualityCheckList(this.callForm.page)
            }
          })
        }
      },
      queryQualityCheckList (page) {
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.form.TEMPLATE = this.template._id
          this.form.pageSize = 10
          this.form.page = page
          if (this.form.claimTime && this.form.claimTime[0] !== null) {
            this.form.beginTimeBegin = getDateTime(this.form.claimTime[0])
          }
          if (this.form.claimTime && this.form.claimTime[1] !== null) {
            this.form.beginTimeEnd = getDateTime(this.form.claimTime[1])
          }
          if (this.form.checkTime && this.form.checkTime[0] !== null) {
            this.form.CHECK_BEGIN_TIME = getDateTime(this.form.checkTime[0])
          }
          if (this.form.checkTime && this.form.checkTime[1] !== null) {
            this.form.CHECK_END_TIME = getDateTime(this.form.checkTime[1])
          }
          if (this.form.submitTime && this.form.submitTime[0] !== null) {
            this.form.applyQcWebchatTimeBegin = getDateTime(this.form.submitTime[0])
          }
          if (this.form.submitTime && this.form.submitTime[1] !== null) {
            this.form.applyQcWebchatTimeEnd = getDateTime(this.form.submitTime[1])
          }
          let finishArr = this.activeFinish
          if (finishArr && finishArr.length > 0) {
            for (let i = 0; i < finishArr.length; i++) {
              finishArr[i] = finishArr[i].split('__')[0]
            }
          }
          this.form.finishKey = finishArr[finishArr.length - 1]
          let data = deepClone(this.form)
          delete data.submitTime
          data.maxGrade = this.GRADE_P.split('0-')[1]
          this.tableLoading = true
          console.log('========data=======', data)
          this.$store.dispatch('queryQualityCheckList', data).then((res) => {
            this.isSearchState = true
            this.tableLoading = false
            this.tableDataWebchat = res.list
            this.tableDataHeaderWebchat = res.tableHeader
          })
        } else {
          this.callForm.TEMPLATE = this.template._id
          this.callForm.pageSize = 10
          this.callForm.page = page
          if (this.callForm.callTime && this.callForm.callTime[0] !== null) {
            if (typeof this.callForm.callTime[0] === 'string') {
              this.callForm.BEGIN_TIME = this.callForm.callTime[0]
            } else {
              this.callForm.BEGIN_TIME = getDateTime(this.callForm.callTime[0])
            }
          }
          if (this.callForm.callTime && this.callForm.callTime[1] !== null) {
            if (typeof this.callForm.callTime[1] === 'string') {
              this.callForm.END_TIME = this.callForm.callTime[1]
            } else {
              this.callForm.END_TIME = getDateTime(this.callForm.callTime[1])
            }
          }
          if (this.callForm.GRADE_TIME && this.callForm.GRADE_TIME[0] !== null) {
            this.callForm.CHECK_BEGIN_TIME = getDateTime(this.callForm.GRADE_TIME[0])
          }
          if (this.callForm.GRADE_TIME && this.callForm.GRADE_TIME[1] !== null) {
            this.callForm.CHECK_END_TIME = getDateTime(this.callForm.GRADE_TIME[1])
          }
          if (this.callForm.SUBMITTED_TIME && this.callForm.SUBMITTED_TIME[0] !== null) {
            this.callForm.AGENT_BEGIN_TIME = getDateTime(this.callForm.SUBMITTED_TIME[0])
          }
          if (this.callForm.SUBMITTED_TIME && this.callForm.SUBMITTED_TIME[1] !== null) {
            this.callForm.AGENT_END_TIME = getDateTime(this.callForm.SUBMITTED_TIME[1])
          }
          let data = deepClone(this.callForm)
          delete data.GRADE_TIME
          delete data.SUBMITTED_TIME
          if (this.template.type === 'pass') {
            delete data.GRADE_CONFIG
            delete data.GRADE_MIN
            delete data.GRADE_MAX
          } else {
            delete data.amount
            if (data.GRADE_AMOUNT) {
              let checkLevel = data.GRADE_AMOUNT
              delete data.GRADE_AMOUNT
              data.GRADE_AMOUNT = JSON.parse(checkLevel)
            }
          }
          if (!data.monitorType.length) {
            delete data.monitorType
          }
          if (!data.SERVICE_QUALITY.length) {
            delete data.SERVICE_QUALITY
          }
          this.tableLoading = true
          this.$store.dispatch('queryQualityCheckList', data).then((res) => {
            this.isSearchState = true
            this.tableLoading = false
            this.tableDataCall = res.list
            this.tableDataCall.forEach(item => {
              if (item.INVESTIGATE || item.INVESTIGATE === 0) {
                for (let n = 0; n < this.investigateArray.length; n++) {
                  if (this.investigateArray[n].value === item.INVESTIGATE) {
                    item.INVESTIGATE_show = this.investigateArray[n].label || ''
                    if (item.CHILD_INVESTIGATE || item.CHILD_INVESTIGATE === 0) {
                      if (this.investigateArray[n].children.length > 0) {
                        this.investigateArray[n].children.forEach(one => {
                          if (one.value === item.CHILD_INVESTIGATE) {
                            item.INVESTIGATE_show = item.INVESTIGATE_show + '/' + one.label
                          }
                        })
                      }
                    }
                    break
                  }
                }
              }
              item.INVESTIGATE = item.INVESTIGATE_show || ''
            })
            this.tableDataHeaderCall = res.tableHeader
          })
        }
      },
      turnPage (pageNum) {
        this.pagination.currentPage = pageNum
        if (this.template.QUALITY_TYPE === 'qualityWebchat') {
          this.form.page = pageNum
        } else {
          this.callForm.page = pageNum
        }
        this.queryQualityCheckList(pageNum)
      },
      renderCallCache () {
        this.getCallCache = true
        let self = this
        this.$store.dispatch('getCache', {type: 'callType'}).then((res) => {
          let callTypeListData = deepClone(res)
          callTypeListData = callTypeListData.filter(item => {
            item.code_name = m7Language('globalChineseKey.' + item.code_name, null, true) || item.code_name
            return item
          })
          self.callTypeList = callTypeListData
        })
        this.$store.dispatch('getCache', {type: 'agents'}).then((res) => {
          let agents = scopeAgents('qc', res)
          // var callAgents = []
          // agents.forEach((item) => {
          //   item.labelCall = item.displayName + '[' + item.exten + ']'
          //   callAgents.push({value: item._id, label: item.labelCall})
          // })
          // self.callAgentList = callAgents
          // self.agentList = callAgents
          agents.forEach((agent) => {
            self.callAgentList.push({ label: `${agent.displayName}[${agent.exten}]`, value: agent._id })
            self.agentList.push({ label: `${agent.displayName}[${agent.exten}]`, value: agent._id })
          })
        })
        this.$store.dispatch('getCache', {type: 'queues'}).then((res) => {
          self.callQueueList = res
        })
        this.$store.dispatch('getCache', {type: 'options'}).then((res) => {
          let _dics = []
          for (let i = 0; i < res.length; i++) {
            var obj = res[i]
            if (obj.name && obj.name === '满意度调查选项') {
              _dics = obj.options || []
              break
            }
          }
          let satisfactionList = []
          for (var n = 0; n < _dics.length; n++) {
            if (_dics[n] && _dics[n].name && _dics[n].options[0]) {
              satisfactionList.push({name: _dics[n].name, value: _dics[n].options[0].name})
            }
          }
          self.satisfactionList = satisfactionList
        })
        this.$store.dispatch('getCache', {type: 'qualityMonitorCheck'}).then(() => {
          this.monitorTypeList = this.$getCache('qualityMonitorCheck')
        })
        this.$store.dispatch('getCache', {type: 'investigate'}).then((res) => {
          let arrFirst = [{label: this.$t('public.all'), value: ''},{label: this.$t('public.unevaluated'), value: 'unevaluated'}]
          self.investigateArray = generateNewKeyValue(res, ['name', 'value', 'children'], ['label', 'value', 'children'], arrFirst)
        })
      },
      renderContent (h, {column, $index}, item) {
        let arr = column.label.split('__')
        let none = 'none'
        if (arr[1] === 'true') {
          none = 'inline-block'
        }
        return (
          h('div', {
            class: {
              myheader: true
            }
          }, [
            h('span', {
              domProps: {
                innerHTML: arr[0]
              }
            }, [
            ]),
            h('i', {
              style: {
                display: none
              },
              class: {
                iconfont: true,
                icon: true,
                circle: true
              },
              attrs: {
                title: this.$t('qualityCheck.importTip')
              },
              domProps: {
                innerHTML: '&#xe64d;'
              }
            }, [
            ])
          ])
        )
      },
      renderWebchatCache () {
        this.getWebchatCache = true
        let self = this
        this.$store.dispatch('getCache', {type: 'agents'}).then((res) => {
          let agents = scopeAgents('qc', res)
          // var webchatAgents = []
          // agents.forEach((item) => {
          //   item.labelCall = item.displayName + '[' + item.exten + ']'
          //   webchatAgents.push({value: item._id, label: item.labelCall})
          // })
          // self.agentList = webchatAgents
          agents.forEach((agent) => {
            self.agentList.push({ label: `${agent.displayName}[${agent.exten}]`, value: agent._id })
          })
        })
        this.$store.dispatch('getCache', {type: 'channelDic'}).then((dics) => {
          for (var i = 0; i < dics.length; i++) {
            let obj = dics[i]
            if (obj.type === 'webchatCSR') {
              self.appraiseList = obj.options || []
              break
            }
          }
        })
        this.$store.dispatch('getCache', {type: 'mailQueues'}).then((res) => {
          self.queueList = res
        })
        let configs = deepClone(this.template.config)
        this.configList = getQualityCheckConfigs(configs)
      },
      saveFollowedAgents (agents) {
        this.callForm.DISPOSAL_AGENT = deepClone(agents)
        document.getElementsByTagName('body')[0].click()
      },
      closeFollowedAgents (agent) {
        this.callForm.DISPOSAL_AGENT = this.callForm.DISPOSAL_AGENT.filter((item) => item !== agent)
      },
      saveFollowedWebchatAgents (agents) {
        this.form.user = deepClone(agents)
        document.getElementsByTagName('body')[0].click()
      },
      closeFollowedWebchatAgents (agent) {
        this.form.user = this.form.user.filter((item) => item !== agent)
      },
      popoverShow () {
        this.$refs.agentTree.setCheckedKeys()
      },
      popoverWebchatShow () {
        this.$refs.agentTreeWebchat.setCheckedKeys()
      },
//      配置表头
      setHeaderConfig () {
        if (this.template.QUALITY_TYPE !== 'qualityWebchat') {
          this.$store.dispatch('getReportTableHeader', 'quality_result_call_table_title').then((res) => {
            this.headOptions = res
            this.tableConfigType = 'quality_result_call_table_title'
            this.isShowTableConfig = !this.isShowTableConfig
          })
        } else {
          this.$store.dispatch('getReportTableHeader', 'quality_result_webchat_table_title').then((res) => {
            this.headOptions = res
            console.log(this.headOptions)
            this.tableConfigType = 'quality_result_webchat_table_title'
            this.isShowTableConfig = !this.isShowTableConfig
          })
        }
      },
      closeTableConfig (data) {
        this.isShowTableConfig = false
        if (data === 'save') {
          this.query()
        }
      },
      //      二级满意度条件
      changeData (selectValue) {
        if (Array.isArray(selectValue)) {
          this.callForm.INVESTIGATE = selectValue[0]
          if (selectValue.length > 1) {
            this.callForm.CHILD_INVESTIGATE = selectValue[1]
          } else {
            this.callForm.CHILD_INVESTIGATE = selectValue[1] = ''
          }
        }
      }
    },
    beforeMount () {
      let nowTime = new Date()
      let mtDate = nowTime.getTime()
      let startTime = getFormatDateTime(new Date(mtDate - 3600 * 1000 * 24 * 30)).split(' ')[0] + ' 00:00:00'
      let endTime = getFormatDateTime(new Date()).split(' ')[0] + ' 23:59:59'
      let arr = [startTime, endTime]
      this.callForm.callTime = arr
      this.fetchData()
      let p1 = this.$store.dispatch('getQualityTaskTemplates')
      let p2 = this.$store.dispatch('getCache', {type: 'sqLabels'})
      Promise.all([p1, p2]).then(([req, res]) => {
        this.newSqLabel = this.$getCache('sqLabels')
        this.taskTems = req.list
      })
      if (isHasFunc('func_call_quality_result_agent', this.$store.state.session.user)) {
        this.qualityResultAgent = true
      }
      this.$store.dispatch('getCache', {type: 'channelDic'}).then((dics) => {
        let _dics = []
        for (var i = 0; i < dics.length; i++) {
          let obj = dics[i]
          if (obj.type === 'webchat') {
            _dics = obj.options || []
            break
          }
        }
        this.finishOptions = initFinishName(_dics, {})
        let finishKeys = []
        updateAllOptions(_dics, {Arr: this.sessionOptions})
        this.closeOptions = [
          {label: this.$t('webchat.webchatAll'), value: ''}, ...this.sessionOptions,
          {label: this.$t('webchat.addBlack'), value: 'add_black'}
        ]
      })
    },
    computed: {
      selectAgents () {
        if (this.$store.getters.userHidden === 'yes') {
          let agentList = this.$store.getters.filterStopAgents && this.$store.getters.filterStopAgents.map(agent => ({ label: `${agent.displayName}[${agent.exten}]`, value: agent._id }))
          agentList = scopeAgents('qc', agentList)
          return agentList
        }
        return this.callAgentList
      },
//      tableData () {
//        return this.$store.state.qualityCheck.queryGradeList.list
//      },
      count () {
        return this.$store.state.qualityCheck.queryGradeList.count
      },
      totalPage () {
        return Math.ceil(this.$store.state.qualityCheck.queryGradeList.count / 10) || 0
      },
      rankingList () {
        return this.$store.state.qualityCheck.agentRanking.rankingagenthtml
      },
      folllowedAgents () {
        let agents = this.callForm.DISPOSAL_AGENT || []
        let agentsAll = this.$store.getters.agents || {}
        return agents.map((item) => {
          return {_id: item, label: agentsAll[item].displayName}
        })
      },
      folllowedWebchatAgents () {
        let agents = this.form.user || []
        let agentsAll = this.$store.getters.agents || {}
        return agents.map((item) => {
          return {_id: item, label: agentsAll[item].displayName}
        })
      }
    }
  }
  function generateNewKeyValue (list, oldKeys, newKeys, label, flag, currentType) { // 数据类型转换
    let result = []
    if (!Array.isArray(list) || !Array.isArray(oldKeys) || !Array.isArray(newKeys) || oldKeys.length !== newKeys.length) {
      return result
    }
    if (Array.isArray(label)) {
      result = deepClone(label)
    } else if (label) {
      result = [{label: label, value: ''}]
    }
    for (let i = 0; i < list.length; i++) {
      let item = {}
      if (flag) {
        list[i].code_name = m7Language('globalChineseKey.' + list[i].code_name, null, true) || list[i].code_name
      }
      for (let j = 0; j < oldKeys.length; j++) {
        let oldKey = oldKeys[j]
        let newKey = newKeys[j]
        // 递归处理多级数据
        if (Array.isArray(list[i][oldKey])) {
          if (list[i][oldKey].length > 0) {
            item[newKey] = generateNewKeyValue(list[i][oldKey], ['name', 'value'], ['label', 'value'])
          }
        } else {
          item[newKey] = list[i][oldKey]
        }
      }
      result.push(item)
    }
    return result
  }
</script>
<style lang="stylus" scoped>
  @import '../../../assets/common.styl'
  .quality_result
    .m7_slect
      width 200px
    .score
      .el-dialog
        width 840px
  .search-pagination
    float right
  .quality_result
    height calc(100vh - 90px)
    padding 20px 20px 0
    overflow scroll
    .demo-form-inline
      .el-form-item
        width 100%
        height 100%
        .el-select, .el-date-editor, .el-input
          width 100%
          height 100%
    .tables
      padding-bottom 20px
    .el-dialog
      .find
        margin-bottom 20px
      .conte
        color $cf-gray0
      .cont
        padding-top 10px
        color $cf-gray1
      .el-input
        width inherit
      .el-checkbox
        color $c-his-border
        margin-left 10px
      .search
        display inline-block
        width 90px
        height 30px
    .el-form
      margin-top 20px
      .el-row
        padding-bottom 20px
      .el-checkbox
        margin-left 32px
      span
        display inline-block
        text-align right
      .select-wrap
        text-align left
        width 100%
        /deep/.el-cascader
          width 100%
      .fanishType
        width 128px
      .temp
        width 100px
        color $cf-gray1
      .to
        width 24px
        text-align left
        color $c-his-border
        margin-top 6px
      .templ
        width 90px
        color $cf-gray1
    .deploy
      height 48px
      border 1px solid #e7e7eb
      border-bottom none
      padding-left 14px
      .table-header-config
        float left
        line-height 42px
        .iconfont
          font-size 18px
          color $c-main
          float left
        .tex
          cursor pointer
          margin-left 10px
      .page
        margin-top 10px
      .el-pagination
        padding 0
    .cell
      .el-button
        margin-left 0px
    .sub
      text-align right
      margin-top 10px
      .search
        margin-left 24px
    .export
      margin-bottom 20px
    .tem
      padding-bottom 5px
      .el-row
        margin-top 16px
        line-height 36px
        .el-input
          width 100%
        .el-col-2
          width 72px
        .el-col-1
          width 20px
          margin-left 6px
    .templa
      padding-bottom 0px
      .temp
        margin-left 0
        color $cf-gray1
    .el-radio-group
      margin 4px 10px 0 0px
    .el-radio
      margin 0 0 6px 20px
    .ui-affix
      padding-bottom 0
      margin-top 20px
  .audio-dialog
    width 300px
  .pad
    padding-bottom 5px
  .speed-style
    float right
    margin-right 110px
  .follow-label
    line-height 24px
    font-size 12px
  .follow-agent-wrap
    float left
    cursor pointer
    width: 170px
    border-radius: 5px
    border: 1px solid #dcdfe6
    padding: 6px 9px 6px 5px
    margin-top: 10px
    overflow: hidden
  .follow-common
    float left
    position relative
    line-height 24px
    background-color #7ab8f3
    margin 0 0 10px 10px
    padding 0 10px
    color #fff
    border-radius 4px
  .follow-agent-add
    cursor pointer
  .el-icon-close
    font-size 12px
  .follow-agent
    &:hover
      .el-icon-close
        display block
    .el-icon-close
       display none
       position absolute
       right -10px
       top -10px
       width 24px
       height 24px
       font-size 12px
       line-height 24px
       transform scale(0.6)
       text-align center
       color #fff
       background-color #0f99fc
       border-radius 50%
       border 1px solid #cce6ff
       cursor pointer
  .follow-agent-wrap-btn
    display block !important
    line-height 0px
    float right
    cursor pointer
    color $c-main
  .ui-unfold-span
    cursor pointer
    color $c-main
    margin-left 20px
</style>
